<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>HTML5地理定位(Geolocation)</title>
	</head>

	<body>
		<p id="demo">请点击按钮取得你当前的经纬度坐标: <button onclick="getLocation()">取得坐标</button></p>
		<p id="mapholder">请点击按钮获得在谷歌地图上的位置: <button onclick="showPosition()">取得坐标</button></p>
		<p>
			<h5>取得坐标时,会弹出对话框让用户选择是否同意获取当前经纬度</h5></p>
		<p>
			<h5>没有出现经度维度的原因是一般情况下电脑没有自带GPS定位装置</5></p>
<p><h5>如果想查看效果的话可以用手机自带的浏览器查看本页面或者用手机自带的浏览器到<a href="http://www.gbtags.com/tutorials/html5-tutorial/html5-demos/html5-geolocation.html">这个地址去看Demo示例</a></h5></p>
		<p>
			<h5>iPhone用户请在隐私设置中确保Safari浏览器能够访问定位服务</h5></p>
		<script>
			var x = document.getElementById("demo");

			function getLocation() {
				if (navigator.geolocation) {
					navigator.geolocation.getCurrentPosition(showPosition);
				} else {
					x.innerHTML = "你的浏览器不支持HTML5的Geolocation属性.";
				}
			}

			function showPosition(position) {
				x.innerHTML = "经度: " + position.coords.latitude +
					"<br />纬度: " + position.coords.longitude;
			}
			//##########################上面的例子是一个基本的Geolocation脚本，没有做错误处理,以下是加上错误处理的代码：
			//getCurrentPosition()方法的第二个参数用来处理错误。指定一个方法当无法得到用户位置的时候来处理错误:
			function showError(error) {
				switch (error.code) {
					case error.PERMISSION_DENIED:
						x.innerHTML = "用户拒绝Geolocation属性的定位请求()."
						break;
					case error.POSITION_UNAVAILABLE:
						x.innerHTML = "定位信息不可用."
						break;
					case error.TIMEOUT:
						x.innerHTML = "请求超时."
						break;
					case error.UNKNOWN_ERROR:
						x.innerHTML = "未知错误." //非上述几种情况导致的情况
						break;
				}
			}

			//代码解释如下：
			//权限拒绝：用户不需要执行Geolocation,即在弹出的对话框"请求获取当前位置"时点了"否"
			//位置不存在：无法得到用户位置,一般情况是没有GPS的定位装置或者没有网络导致的此错误.
			//超时：操作超时,一般情况是因为网络不可用或者服务商不可用或网速过慢被服务器中断连接导致.
			//######################################有时候需要在地图中显示我们的位置以更直观的显示地理位置，
			//我们需要用到以下代码：
			function showPosition(position) {
				var latlon = position.coords.latitude + "," + position.coords.longitude;

				var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=" + latlon + "&zoom=14&size=400x300&sensor=false";

				document.getElementById("mapholder").innerHTML = "<img src="
				"+img_url+"
				"+img_url+"
				" />";
			}
			//那如何使用脚本来展示一个互动的地图，带有标记，缩放和拖动功能?
			//主要用到Geolocation这个对象的方法和属性,它可以获取到以下信息:
			//最新的本地信息
			//展示用户周围的有趣地方
			//导航(GPS)

			//getCurrentPosition()方法 - 返回数据
			//如果成功getCurrentPosition()方法将返回一个对象。经纬度和准确的信息也会返回。其它属性如果存在也返回
			//以下是常用的该方法返回的属性
			/**属性                                                描述

			coords.latitude                                     将维度用小数表示

			coords.longitude                                    将经度用小数表示

			coords.accuracy                                     位置精度

			coords.altitude                                     海拔高度

			coords.altitudeAccuracy                             海拔高度的精确位置

			coords.heading                                      面朝方向与北方的顺时针夹角

			coords.speed                                        每秒的速度

			timestamp                                           回复时间/日期
			**/

			//Geolocation 对象 - 其它方法还有:
			//watchPosition()方法 - 返回目前的用户位置并且当用户移动后继续返回更新的位置(例如车里的GPS,这个方法很有用)。

			//clearWatch()方法 - 停止watchPosition()方法

			下面的代码展示了如何使用watchPositin() 方法， 注意你需要一个准确的GPS设备来测试, 本地浏览器装置不可用哦（ 例如， iphone）
			var x = document.getElementById("demo");

			function getLocation() {
				if (navigator.geolocation) {
					navigator.geolocation.watchPosition(showPosition);
				} else {
					x.innerHTML = "Geolocation is not supported by this browser.";
				}
			}

			function showPosition(position) {
				x.innerHTML = "Latitude: " + position.coords.latitude +
					"<br />Longitude: " + position.coords.longitude;
		</script>

	</body>

</html>